<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title th:text="${titleName}"></title>
    <link rel="stylesheet" href="/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="/datatables-bs4/css/dataTables.bootstrap4.css">
    <link rel="stylesheet" href="/adminlte/css/adminlte.min.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <style type="text/css">
        #grid{
            border-collapse: collapse;
            table-layout: fixed;
        }
        #grid tr{
            width: 100%;
        }
        #grid tr td{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-wrap: break-word;
        }
        #grid > thead > tr > th {
            text-align: center!important;
        }
    </style>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <header th:replace="admin/common/header::header">

    </header>
    <aside th:replace="admin/common/left::left">

    </aside>
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark" th:text="${titleName}"></h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/index/index">主页</a></li>
                            <li class="breadcrumb-item active" th:text="${titleName}"></li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <section class="content">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">用户列表</h3>
                </div>
                <div class="card-body">
                    <table id="grid" class="table table-bordered table-striped">
                    </table>
                </div>
            </div>
        </section>
    </div>

    <aside class="control-sidebar control-sidebar-dark">
        <div class="p-3">
            <h5>通知</h5>
            <p>内容</p>
        </div>
    </aside>

    <footer th:replace="admin/common/footer::footer">
    </footer>
</div>
<script src="/jquery/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/datatables/jquery.dataTables.js"></script>
<script src="/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<script src="/adminlte/js/adminlte.min.js"></script>
<script src="/adminlte/js/demo.js"></script>
<script>
    $(function () {
        $("#grid").DataTable({
            processing: true,
            serverSide: false,
            lengthChange:false,
            searching:false,
            autoWidth:true,
            ajax: {
                url:"/api/users",
                type:"GET",
                dataSrc:"result"
            },
            columns: [
                {
                    data:null,
                    title:"序号" ,
                    width:50 ,
                    className: 'text-center whiteSpace',
                    render:function(data,type,row,meta) {
                        return meta.row + 1 +
                            meta.settings._iDisplayStart;
                    }},
                { data: "username",title:"用户名",width:150,className: 'text-center whiteSpace'},
                { data: "realname",title:"姓名" ,width:150,className: 'text-center whiteSpace'},
                { data: "status" ,title:"状态",width:100,className: 'text-center whiteSpace',render:function(data,type,row,full){
                    if(data==1){
                        return "启用";
                    }else{
                        return "禁用";
                    }
                    }},
                { data: "telephone" ,title:"联系电话",width:150,className: 'text-center whiteSpace'},
                { data: "roleId" ,title:"角色" , width:100,className: 'text-center whiteSpace'},
                { data:null, title:"操作",className: 'text-center whiteSpace'}
            ],
            aoColumnDefs: [{
                render:function(){
                    return "按钮";
                },
                targets:6
            }],
            language: {
                processing: "处理中...",
                lengthMenu: "显示 _MENU_ 项结果",
                zeroRecords: "没有匹配结果",
                info: "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                infoEmpty: "显示第 0 至 0 项结果，共 0 项",
                infoFiltered: "(由 _MAX_ 项结果过滤)",
                infoPostFix: "",
                search: "搜索:",
                url: "",
                emptyTable: "表中数据为空",
                loadingRecords: "载入中...",
                infoThousands: ",",
                paginate: {
                    first: "首页",
                    previous: "上页",
                    next: "下页",
                    last: "末页"
                },
                aria: {
                    sortAscending: ": 以升序排列此列",
                    sortDescending: ": 以降序排列此列"
                }
            }
        });
    });
</script>
</body>
</html>
